<template>
  <div class="h">
    <!-- 头部 -->
    <div class="head">
      <City class="city" :city="city" @change="getMovie" />
      <van-tabs v-model="active" line-width="125" @scroll="scroll" @change="scrolltop" animated sticky swipeable>
        <van-tab title="       " key="1" disabled></van-tab>
        <van-tab title="正在热映" key="2">
          <Banner :data="banner" />
          <div class="b">
            <Item v-for="item in movie" :data="item" :key="item.id" cate="正在热映" />
          </div>
        </van-tab>
        <van-tab title="即将上映" key="3">
          <WillMovie class="b" :data="willmovie" />
        </van-tab>
      </van-tabs>
      <!-- <div v-for="item in 100" :key="item">{{ item }}</div> -->
    </div>
  </div>
</template>

<script>
import City from '../common/City.vue' //选择城市
import Banner from '../common/Banner.vue'// 轮播图
import Item from '../common/Item.vue'
import WillMovie from '../common/WillMovie.vue'

import http from '../../request/index'

export default {
  name: 'Movie',
  components: {
    Banner, Item, City, WillMovie
  },
  data() {
    return {
      active: 1,
      banner: [],
      movie: [],
      city: {},
      willmovie: {},
      pager: {
        limit: 20,
        offset: 0
      },
      zzry: 0,
      jjsy: 0,
      windowHeight: 0,
      timer: null
    }
  },
  methods: {
    getMovie() {
      const cityname = this.$store.state.cityname
      let city = ''
      if (cityname === '北京') { city = 'bj' }
      if (cityname === '上海') { city = 'sh' }
      if (cityname === '广州') { city = 'gz' }
      http('/hot/', this, 'get', { params: { city } }).then(res => {
        if (res.data.data.returnCode === '0') {
          this.movie = res.data.data.returnValue
        }
      }).catch(err => console.log(err))
    },
    getcoming() {
      // 请求即将上映数据
      http('/coming/', this, 'get', { params: { ...this.pager } }).then(res => {
        if (res.data.data.returnCode === '0') {
          const data = res.data.data.returnValue
          let newdata = JSON.parse(JSON.stringify(this.willmovie))
          const key = [...new Set(data.map(i => i.openTime))]
          key.forEach(i => newdata[i] = data.filter(item => item.openTime === i))
          this.willmovie = newdata
          this.pager.offset = this.pager.offset + this.pager.limit
          if (this.pager.offset >= res.total) {
            this.$toast.success('加载完毕')
            this.timer = 1

          }
        }
      }).catch(err => console.log(err))

    },
    scrolltop(name) {
      if (name === 1) {
        this.jjsy = document.documentElement.scrollTop || document.body.scrollTop
        setTimeout(() => {
          document.documentElement.scrollTop = this.zzry
          document.body.scrollTop = this.zzry
        }, 0)
      } else {
        this.zzry = document.documentElement.scrollTop || document.body.scrollTop
        setTimeout(() => {
          document.documentElement.scrollTop = this.jjsy
          document.body.scrollTop = this.jjsy
        }, 0)
      }
    },
    scroll(e) {
      if (this.timer) return
      if (this.active === 1) return
      this.timer = setTimeout(() => {
        this.timer = null
        const windowHeight = (document.body.scrollHeight || document.documentElement.scrollHeight) - 1000;
        if (e.scrollTop >= windowHeight) {
          this.getcoming()
        }
      }, 500)
    }
  },
  created() {
    // 请求轮播图数据
    http('/swiper', this).then((res) => {
      if (res.data.data.returnCode === '0') {
        const bsae = 'https://gw.alicdn.com/tfs/'
        this.banner = res.data.data.returnValue.map(i => bsae + i.smallPicUrl)
      }
    }).catch(err => {
      console.log(err);
    })

    //请求城市数据
    http('/city', this).then((res) => {
      if (res.data.data.returnCode === '0') {
        this.city = res.data.data.returnValue
      }
    }).catch(err => {
      console.log(err);
    })

    // 请求热映电影数据
    this.getMovie()
    this.getcoming()

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.b {
  margin-bottom: (50/16rem);

}

.head {
  position: relative;
  height: 44px;

  .city {
    position: fixed;
    text-align: center;
    line-height: 44px;
    width: (130/16rem);
    font-size: 14px;
    font-weight: 500;
    z-index: 999;
  }
}
</style>
